<template>
    <view class="feedback-container">
      <uni-forms ref="formRef" :model="formData" :rules="rules">
        <uni-forms-item label="反馈描述" name="description">
          <uni-easyinput
            v-model="formData.description"
            placeholder="反馈描述：平台、错误、其他"
          />
        </uni-forms-item>

        <uni-forms-item label="联系方式" name="contact">
          <uni-easyinput
            v-model="formData.contact"
            placeholder="联系方式（请注明QQ还是微信）"
          />
        </uni-forms-item>

        <uni-forms-item label="反馈内容" name="content">
          <view class="textarea-box">
            <textarea
              v-model="formData.content"
              class="feedback-textarea"
              placeholder="反馈内容，请详细描述问题。例如：平台错误，请说明哪个平台，最新网址是什么，尽量提供一个测试帐号！"
            />
            <text class="word-count">{{ formData.content.length }}/500</text>
          </view>
        </uni-forms-item>
  
        
  
        <button class="submit-btn" @click="submitForm">提交反馈</button>
      </uni-forms>
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue'
  
  const formRef = ref()
  const formData = reactive({
    description: '',
    content: '',
    contact: ''
  })
  
  const rules = {
    description: {
      rules: [{ required: true, errorMessage: '请输入反馈描述' }]
    },
    content: {
      rules: [
        { required: true, errorMessage: '请输入反馈内容' },
        { maxLength: 500, errorMessage: '反馈内容最多500字' }
      ]
    },
    contact: {
      rules: [{ required: true, errorMessage: '请输入联系方式' }]
    }
  }
  
  const submitForm = async () => {
    try {
      const valid = await formRef.value.validate()
      if (valid) {
        // TODO: 实现提交逻辑
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
      }
    } catch (err) {
      console.error(err)
    }
  }
  </script>
  
  <style lang="scss">
  .feedback-container {
    padding: 20rpx;
    
    .textarea-box {
      position: relative;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      padding: 10rpx;
      
      .feedback-textarea {
        width: 100%;
        height: 300rpx;
        padding: 20rpx;
        box-sizing: border-box;
      }
      
      .word-count {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  </style>